<template>
  <scroll-view style="height: 100%;" scroll-y="true">
    <div class="btns">
      <button type="primary" size="mini" @click="submit('dialogform')">保存</button>
      <button @click="closeDrawer" size="mini" type="default">取消</button>
    </div>
    <view class="contentdraw">
      <uni-forms ref="dialogform" :modelValue="productItem" :rules="rules">
        <uni-forms-item name="cpmc">
          <lin-select :list="productList" :loading="loading" loading-text="数据加载中" value-key="id" name-key="cpmc"
            :max-height="180" @confirm="changeproduct" placeholder="请输入商品名称" @input="getProData" v-model="cpmc" />
        </uni-forms-item>
        <uni-forms-item name="gmsl">
          <uni-easyinput v-model="productItem.gmsl" placeholder="请输入购买数量" />
        </uni-forms-item>
        <uni-forms-item name="yjmc">
          <uni-easyinput v-model="productItem.yjmc" placeholder="请输入邮寄姓名" />
        </uni-forms-item>
        <uni-forms-item name="yjsj">
          <uni-easyinput v-model="productItem.yjsj" placeholder="请输入邮寄号码" />
        </uni-forms-item>
        <uni-forms-item name="yjdz">
          <uni-easyinput v-model="productItem.yjdz" placeholder="请输入邮寄地址" />
        </uni-forms-item>
          <div class="cont">
            <image class="pro_image" :src="productItem.cptpdz1" mode=""></image>
          </div>
      </uni-forms>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      drawformData: {
        cpmc: '',
        gmsl: '',
        yjmc: '',
        yjsj: '',
        yjdz: '',
        cptpdz1: '',
      },
      rules: {
        cpmc: {
          rules: [{
            required: true,
            errorMessage: "请输入商品名称"
          },
          ]
        },
        gmsl: {
          rules: [{
            required: true,
            errorMessage: "请输入购买数量"
          },
          ]
        },
      },
      productList: [],
      productItem: {},
      cpmc: '', // 商品名称
    }
  },
  methods: {
    closeDrawer() {
      this.$emit('closeDrawer')
    },
    submit(ref) {
      this.$refs[ref].validate().then(res => {
        this.$emit('submit', this.productItem)
      }).catch(err => {
        console.log('err', err);
      })
    },
    getProData(e) {
      console.log(e)
      if (e) {
        this.loading = true
        this.$request('mobile/getProNmBychannelProInfo', 'post', { yhsj: uni.getStorageSync('mobile'), cpmc: e }).then(res => {
          if (res.code == 200) {
            console.log(res)
            this.productList = res.data.productInfo
            this.loading = false
          }
        })
      }
    },
    changeproduct(e) {
      this.productList.forEach(item => {
        if (item.id == e) {
          this.productItem = item
        }
      })
    },
  }
}
</script>

<style lang="scss">
.contentdraw {
  padding: 20rpx;
}
.uni-easyinput {
  margin-bottom: 20rpx;
}
.pro_image {
  border: 1px solid #ebeef5;
  width: 300rpx;
  height: 300rpx;
  margin-right: 20rpx;
}
.btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  button {
    margin: 0;
    &:first-child {
      background: #01a0fe;
    }
  }
}
.cont{
  overflow-y: hidden;
  white-space: nowrap;
}
</style>